<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慈善-捐款可视化</title>

    <script src="../../static/front/js/echarts.js"></script>

    <script src="../../static/front/js/echarts.min.js"></script>


    <style>
        /* 设置容器的样式 */
        .container {
            display: flex;
        }
        /* 设置容器之间的间距 */
        .chart-container {
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 左侧容器 -->
    <div id="intervalNumber" class="chart-container" style="width: 600px;height:400px;"></div>

    <!-- 右侧容器 -->
    <div id="provinceNumber" class="chart-container" style="width: 800px;height:600px;"></div>

    <!-- 单独的容器 -->
    <div id="monthTrend" style="width: 800px;height:600px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('intervalNumber'), 'dark');

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['>50', '50-100', '100-150', '150-200', '200-250', '250-300', '>300'],
            name: '捐款金额区间', // 添加横坐标含义
            nameLocation: 'middle', // 将横坐标含义居中显示
            nameTextStyle: {
                fontSize: 14,
                padding: [20, 0, 0, 0] // 设置上边距，增加文字和坐标轴的距离
            }
        },
        yAxis: {
            type: 'value',
            name: '捐款总额（单位：人民币）', // 添加纵坐标含义
            nameLocation: 'middle', // 将纵坐标含义居中显示
            nameTextStyle: {
                fontSize: 14,
                padding: [0, 0, 20, 0] // 设置左边距，增加文字和坐标轴的距离
            }
        },
        tooltip: { // 添加 tooltip 配置项
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        series: [
            {
                data: [
                    120,
                    {
                        value: 200,
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    150,
                    80,
                    70,
                    110,
                    130
                ],
                type: 'bar'
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


  /* ====================================================================================================*/

    // 创建 ECharts 实例
    var myChart1 = echarts.init(document.getElementById('provinceNumber'),'dark');

    // 模拟各省份的捐款数据
    var donationData = {
        '北京': 1000,
        '天津': 800,
        '河北': 1200,
        // 其他省份的捐款数据...
    };

    // 配置地图的 option
    var option1 = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}：{c}万元'
        },
        visualMap: {
            min: 0,
            max: 2000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#7fe2ef', '#e70d0d'] // 设置捐款数量对应的颜色范围
            }
        },
        series: [{
            name: '捐款金额',
            type: 'map',
            map: 'china', // 使用的地图类型
            roam: true, // 可以通过鼠标缩放和平移来控制地图
            data: Object.keys(donationData).map(function (key) {
                return {name: key, value: donationData[key]};
            }) // 格式化各省份的捐款数据
        }]
    };

    // 加载地图并设置option
    myChart1.showLoading();
    fetch('./china.json') // 获取地图数据文件
        .then(response => response.json())
        .then(chinaJson => {
            echarts.registerMap('china', chinaJson); // 注册中国地图数据
            myChart1.setOption(option1); // 设置 option
            myChart1.hideLoading(); // 隐藏加载动画
        })
        .catch(error => {
            console.error('Error loading China map data:', error);
            myChart1.hideLoading(); // 隐藏加载动画
        });


    /* ====================================================================================================*/

    var myChart2 = echarts.init(document.getElementById('monthTrend'), 'dark');

    var option2;

    option2 = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['2020', '2021', '2022', '2023', '2024']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '2020',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210, 190,230,209,134,234]
            },
            {
                name: '2021',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310,101, 134, 90, 230, 210]
            },
            {
                name: '2022',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330]
            },
            {
                name: '2023',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320, 410, 182, 191, 234, 290]
            },
            {
                name: '2024',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    option2 && myChart2.setOption(option2);

</script>
</body>
</html>